<template>
  <div>
    <!-- 坑 -->
    <div class="wxz_q1">
      <el-input
        v-model="input"
        placeholder="请输入你的任务名称，按回车键确定"
        @keydown.13.native="add"
      ></el-input>

      <br />
      <br />
      <!-- 内容 -->
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div
          class="box"
          v-for="(item, index) in $store.state.list"
          :key="index"
          @mouseenter="item.ss = true"
          @mouseleave="item.ss = false"
          :class="{ xx: item.ss }"
        >
          <van-checkbox :name="item" @click="box">{{ item.text }}</van-checkbox>
          <van-button
            v-show="item.ss"
            type="danger"
            size="small"
            @click="remove(item.id)"
            >删除</van-button
          >
        </div>
      </van-checkbox-group>

      <div class="qwe">
        <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
        <div>
          <span
            >已选择 : <b>{{ result.length }}</b></span
          >
          /
          <span
            >全部 : <b>{{ $store.state.list.length }}</b></span
          >
        </div>
        <div>
          <van-button v-if="result.length != 0" type="danger" @click="removess"
            >删除所有已选</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //数据 属性
  data() {
    return {
      input: "",
      result: [],
      checked: false,
    };
  },
  //组件挂载完成 而且渲染完成
  mounted() {},
  // 方法 属性
  methods: {
    // 添加
    add() {
      console.log(this.input);
      if (this.input == "") {
        alert("不能为空");
      }

      if (this.input != "") {
        this.$store.commit("add", this.input);
        this.input = "";
      }
    },
    // 复选
    box() {
      console.log(this.result);
      if (
        this.result.length == this.$store.state.list.length &&
        this.result.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 全选
    checkAll() {
      if (this.checked == true) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll(false);
      }
    },
    // 删除
    remove(id) {
      console.log(id);
      this.$store.commit("remove", id);
      this.box();
    },
    // 删除ss
    removess() {
      this.result.forEach((res) => {
        this.remove(res.id);
      });
      this.box();
    },
  },
};
</script>

<style lang="scss">
// scoped 开启独立样式
.wxz_q1 {
  width: 800px;
  border: 2px black solid;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px;
}
.box {
  width: 100%;
  height: 40px;
  border: 1px black solid;
  // border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 10px;
}
.xx {
  background: white;
}
.qwe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}
</style>
